<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<script type="text/javascript">
//阳历每月天数
var workCalendarSolarMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
//例外日期，比如：工作日调休
var workCalendarException = new Array(${exceptionDate});
$(function(){
	var now = new Date();
	var year = now.getFullYear();
	var month = now.getMonth();
	$('#work_calendar').find('#work_calendar_year').val(now.getFullYear());
	$('#work_calendar').find('#work_calendar_month').val(now.getMonth()+1);
	loadMonth(now.getFullYear(), now.getMonth() + 1, now);

	$('#work_calendar').find('.prev-year').click(function(){
		if(year == 2010){
			return;
		}
		$('#work_calendar').find('#work_calendar_year').selectpicker('val', --year);
		loadMonth(year, month+1, now);
	});

	$('#work_calendar').find('.next-year').click(function(){
		if(year == 2030){
			return;
		}
		$('#work_calendar').find('#work_calendar_year').selectpicker('val', ++year);
		loadMonth(year, month+1, now);
	});

	$('#work_calendar').find('.prev-month').click(function(){
		if(month == 0){
			if(year == 2010){
				return;
			}
			year--;
			month = 11;
			loadMonth(year, month+1, now);
			$('#work_calendar').find('#work_calendar_month').selectpicker('val', month+1);
			$('#work_calendar').find('#work_calendar_year').selectpicker('val', year);
		} else {
			loadMonth(year, month, now);
			$('#work_calendar').find('#work_calendar_month').selectpicker('val', month--);
		}
	});

	$('#work_calendar').find('.next-month').click(function(){
		if(month == 11 ){
			if(year == 2030){
				return;
			}
			year++;
			month = 0;
			$('#work_calendar').find('#work_calendar_month').selectpicker('val', month+1);
			$('#work_calendar').find('#work_calendar_year').selectpicker('val', year);
		} else {
			$('#work_calendar').find('#work_calendar_month').selectpicker('val', ++month+1);
		}
		loadMonth(year, month+1, now);
	});
	
	$('#work_calendar').find('.today').click(function(){
		$('#work_calendar').find('#work_calendar_year').selectpicker('val', now.getFullYear());
		$('#work_calendar').find('#work_calendar_month').selectpicker('val', now.getMonth()+1);
		loadMonth(now.getFullYear(), now.getMonth() + 1, now);
	});

	$('#work_calendar').find('#work_calendar_year').change(function(){
		var _year = $(this).val();
		var _month = $('#work_calendar').find('#work_calendar_month').val();
		year = parseInt(_year);
		month = parseInt(_month);
		loadMonth(year, month, now);
	});
	
	$('#work_calendar').find('#work_calendar_month').change(function(){
		var _month = $(this).val();
		var _year = $('#work_calendar').find('#work_calendar_year').val();
		year = parseInt(_year);
		month = parseInt(_month);
		loadMonth(year, month, now);
	});
});

function loadMonth(_year, _month, now) {
	var sdate, c, tdc, onclk, wd, week = 1;
	var monthDays = workCalendarSolarMonth[_month - 1];
	if(_month == 2 && isLeapYear(_year)){
		monthDays++;
	}
	$('#work_calendar_body td').empty();
	for(var i = 0; i < monthDays; i++){
		var workdate='';
		sdate = new Date(_year, _month - 1, i + 1);
		onclk = ' onclick="editWorkCalendar(' + _year + ',' + _month + ',' + (i + 1) + ')" ';
		if((i+1) == now.getDate() && _month == (now.getMonth()+1) && now.getFullYear() == _year){
			tdc = ' class="div-day-cell-today" ';
		} else {
			tdc = '';
		}
		wd = sdate.getDay();
		if(wd == 0 || wd == 6){
			c = '<span style="color:red;">' + (i + 1) + '</span>';
			var dateType = getExceptionDateType(sdate);
			if(dateType == '0'){
				workdate = '<span class="span-workday-sign">班</span>';
			} else if(dateType == '1'){
				workdate = '<span class="span-holiday-sign">休</span>';
			}
		} else {
			c = '<span>' + (i + 1) + '</span>';
			var dateType = getExceptionDateType(sdate);
			if(dateType == '1'){
				workdate = '<span class="span-holiday-sign">休</span>';
			} else {
				//workdate = '<span class="span-workday-sign">班</span>';
			}
		}
		
		//console.log('sdate=' + sdate + ' wd=' + wd + ' week=' + week);
		$(".day" + week + (wd+1)).append('<div style="width:100%;height:100%;text-align: center;"' + tdc + onclk
				+ ' onmouseover="dayCellMouseover(this)" onmouseout="dayCellMouseout(this)">' + workdate
				+ '<div style="vertical-align: middle;padding-top: 20%;font-size:14px;font-weight:800;">' + c
				+ '</div></div>');
		if(wd == 6){
			week++;
		}
	}
}

function isLeapYear(year) {
	return (0==year%4&&((year%100!=0)||(year%400==0)));
}

function dayCellMouseover(_this){
	var $this = $(_this);
	$this.addClass("div-day-cell-over");
}

function dayCellMouseout(_this){
	var $this = $(_this);
	$this.removeClass("div-day-cell-over");
}

function editWorkCalendar(_year, _month, _date) {
	var cdate = new Date(_year, _month-1, _date);
	var sdate = dateToStr('yyyy-MM-dd', cdate);
	$('#edit-workdate-dialog').dialog({
		id:'edit-workdate-dialog',
		url:'workcalendar/edit.do',
		maxable: false,
		mask: true,
		resizeable: false,
		width: 850,
		height: 300,
		onLoad: function($dialog){
			setEditWorkCalendarBtnEvent($dialog, cdate);
			getJsonData2Form('workcalendar/getWorkDate.do', 'dateValue='+sdate, $('#workcalendar_form'), null);
		},
		
		title:'工作日历 - 编辑'});
}

function setEditWorkCalendarBtnEvent($dialog, _date) {
	var $remove, $save, $cancel;
	$remove = $dialog.find('.remove');
	$save = $dialog.find('.save');
	$cancel = $dialog.find('.cancel');

	$remove.click(function(){
		$('#workcalendar_form').alertmsg('confirm', '确定删除当前数据？', 
		{
		    displayMode:'slide', 
            okName:'确定', 
            cancelName:'取消', 
            title:'提示信息',
            okCall : function(){
            	var url = "workcalendar/del.do";
    			var data = $('#workcalendar_form').serialize();
    			var successCallBack = function(result){
    				$dialog.dialog('closeCurrent');
    				refeshWorkCalendar(_date, $('#workcalendar_form').find('#l_workcalendar_datetype').val(), 'del');
    			}
    			var failCallBack = null;
    			var errorCallBack = null;
    			myAjax(url, data, true, successCallBack, failCallBack, errorCallBack);
            }
		 });
	});
	
	$save.click(function(){
		$('#workcalendar_form').isValid(function(v) {
			if(v){
				var url = 'workcalendar/save.do';
    			var data = $('#workcalendar_form').serialize();
    			var successCallBack = function(result){
    				$dialog.dialog('closeCurrent');
    				refeshWorkCalendar(_date, $('#workcalendar_form').find('#l_workcalendar_datetype').val(), 'edit');
    			}
    			var failCallBack = null;
    			var errorCallBack = null;
    			myAjax(url, data, true, successCallBack, failCallBack, errorCallBack);
			}
		});
	});

	$cancel.click(function(){
		$dialog.dialog('closeCurrent');
	});
}

function refeshWorkCalendar(_date, _dateType, optType) {
	var sdate = dateToStr('yyyy-MM-dd', _date);
	var idx = -1;
	// 先判断例外日期数组中，是否存在当前日期
	for(var i=0; i<workCalendarException.length; i++) {
		if(workCalendarException[i].substr(0, 10) == sdate) {
			idx=i;
			break;
		}
	}
	//console.log(workCalendarException);
	// 如果存在当前日期，更新workCalendarException数组，使用splice(start,deleteCnt,args)
	if(optType == 'edit'){
		if(idx >= 0){
			workCalendarException.splice(idx, 1, sdate+'|'+_dateType);
		} else {
			workCalendarException.push(sdate+'|'+_dateType);
		}
	} else if(optType == 'del') {
		if(idx >= 0){
			workCalendarException.splice(idx, 1);
		}
	}
	//console.log(workCalendarException);
	loadMonth(_date.getFullYear(), _date.getMonth()+1, new Date());
}

function getExceptionDateType(_date) {
	var sdate = dateToStr('yyyy-MM-dd', _date);
	var idx = -1;
	var dateType='';
	// 先判断例外日期数组中，是否存在当前日期
	for(var i=0; i<workCalendarException.length; i++) {
		//alert(workCalendarException[i] + "===" + workCalendarException[i].substr(0, 10));
		if(workCalendarException[i].substr(0, 10) == sdate) {
			idx=i;
			dateType = workCalendarException[i].substr(11);
			break;
		}
	}
	if(idx >= 0){
		return dateType;
	} else {
		return dateType;
	}
}
</script>
<div id="work_calendar" class="bjui-pageContent" style="width:100%;height:100%;margin:0;padding:0;">
	<div id="work_calendar_header" style="position:absolute;width:100%;height:30px;text-align: center;">
		<div style="margin-left:3px; margin-top:3px;">
			<button type="button" class="btn btn-default prev-month" data-icon="arrow-left" title="上月"></button>
			<select id="work_calendar_year" data-toggle="selectpicker" data-width="85">
				<option value="2010">2010年</option>
				<option value="2011">2011年</option>
				<option value="2012">2012年</option>
				<option value="2013">2013年</option>
				<option value="2014">2014年</option>
				<option value="2015">2015年</option>
				<option value="2016">2016年</option>
				<option value="2017">2017年</option>
				<option value="2018">2018年</option>
				<option value="2019">2019年</option>
				<option value="2020">2020年</option>
				<option value="2021">2021年</option>
				<option value="2022">2022年</option>
				<option value="2023">2023年</option>
				<option value="2024">2024年</option>
				<option value="2025">2025年</option>
				<option value="2026">2026年</option>
				<option value="2027">2027年</option>
				<option value="2028">2028年</option>
				<option value="2029">2029年</option>
				<option value="2030">2030年</option>
			</select>
			<select id="work_calendar_month" data-toggle="selectpicker">
				<option value="1">1月</option>
				<option value="2">2月</option>
				<option value="3">3月</option>
				<option value="4">4月</option>
				<option value="5">5月</option>
				<option value="6">6月</option>
				<option value="7">7月</option>
				<option value="8">8月</option>
				<option value="9">9月</option>
				<option value="10">10月</option>
				<option value="11">11月</option>
				<option value="12">12月</option>
			</select>
			<button type="button" class="btn btn-default next-month" data-icon="arrow-right" title="下月"></button>
			<button type="button" class="btn btn-default today" data-icon="calendar">今    天</button>
		</div>
	</div>
	<div id="work_calendar_body" style="position:absolute;top:30px;bottom:15px;width:100%;">
		<table class="table table-condensed table-bordered" style="height:100%" data-toggle="table" data-width="100%">
			<thead>
                <tr>
                    <th style="width:14%;height:30px;text-align: center;font-size:14px;">星期日</th>
                    <th style="width:14%;height:30px;text-align: center;font-size:14px;">星期一</th>
                    <th style="width:14%;height:30px;text-align: center;font-size:14px;">星期二</th>
                    <th style="width:14%;height:30px;text-align: center;font-size:14px;">星期三</th>
                    <th style="width:14%;height:30px;text-align: center;font-size:14px;">星期四</th>
                    <th style="width:14%;height:30px;text-align: center;font-size:14px;">星期五</th>
                    <th style="width:14%;height:30px;text-align: center;font-size:14px;">星期六</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
                    <td style="width:14%;height:16%;padding:0;" class="day11"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day12"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day13"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day14"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day15"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day16"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day17"></td>
                </tr>
            	<tr>
                    <td style="width:14%;height:16%;padding:0;" class="day21"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day22"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day23"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day24"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day25"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day26"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day27"></td>
                </tr>
            	<tr>
                    <td style="width:14%;height:16%;padding:0;" class="day31"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day32"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day33"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day34"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day35"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day36"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day37"></td>
                </tr>
            	<tr>
                    <td style="width:14%;height:16%;padding:0;" class="day41"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day42"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day43"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day44"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day45"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day46"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day47"></td>
                </tr>
            	<tr>
                    <td style="width:14%;height:16%;padding:0;" class="day51"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day52"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day53"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day54"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day55"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day56"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day57"></td>
                </tr>
            	<tr>
                    <td style="width:14%;height:16%;padding:0;" class="day61"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day62"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day63"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day64"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day65"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day66"></td>
                    <td style="width:14%;height:16%;padding:0;" class="day67"></td>
                </tr>
            </tbody>
		</table>
	</div>
</div>
<div id="edit-workdate-dialog" style="display: none;"></div>